import {
  Button,
  Card,
  Col,
  Drawer,
  Flex,
  Form,
  Input,
  message,
  Row,
  Space,
  Table,
} from "antd";
import { useDispatch, useSelector } from "react-redux";
import {
  addWarehouse,
  deleteWarehouse,
  IWarehouse,
  selectAllWarehouse,
  updateWarehouse,
} from "../../../store/slices/productsSlice.ts";
import { useState } from "react";

export default function Warehouse() {
  const dispatch = useDispatch();
  const [messageApi, contextHolder] = message.useMessage();
  // 仓库数组
  const warehouses = useSelector(selectAllWarehouse);
  // 编辑模式
  const [editMode, setEditMode] = useState(false);
  // Drawer是否可见
  const [openEditWarehouseDrawer, setOpenEditWarehouseDrawer] = useState(false);
  const [crtWarehouse, setCrtWarehouse] = useState<IWarehouse>({
    id: -1,
    wName: "",
    address: "",
    note: "",
    createTime: "",
  });

  // Drawer
  const closeEditDrawer = () => {
    setOpenEditWarehouseDrawer(false);
    setEditMode(false);
  };
  const openEditDrawer = (w: IWarehouse | null) => {
    if (w) {
      setCrtWarehouse(w);
      setEditMode(true);
    }
    setOpenEditWarehouseDrawer(true);
  };
  const EditWarehouse = () => {
    let clickHandler = () => {
      dispatch(
        addWarehouse({ ...crtWarehouse, id: Math.floor(Math.random() * 1000) }),
      );
      closeEditDrawer();
      messageApi.success(`新增${crtWarehouse.wName}信息成功`).then();
    };
    if (editMode) {
      clickHandler = () => {
        dispatch(updateWarehouse(crtWarehouse));
        closeEditDrawer();
        messageApi.success(`修改${crtWarehouse.wName}信息成功`).then();
      };
    }
    return (
      <Space>
        <Button type="primary" onClick={clickHandler}>
          {editMode ? "修改" : "新增"}
        </Button>
        <Button>取消</Button>
      </Space>
    );
  };

  return (
    <>
      <Flex vertical={true} gap="small" style={{ padding: "10px" }}>
        <Card title="筛选">
          <Space>
            <Input.Search placeholder="请输入仓库名称" enterButton="搜索" />
          </Space>
        </Card>
        <Card
          title="仓库列表"
          extra={
            <Button type="primary" onClick={() => openEditDrawer(null)}>
              新增仓库
            </Button>
          }>
          <Table dataSource={warehouses} rowKey="id">
            <Table.Column title="编号" dataIndex="id" />
            <Table.Column title="仓库名" dataIndex="wName" />
            <Table.Column title="地址" dataIndex="address" />
            <Table.Column title="备注" dataIndex="note" />
            <Table.Column title="创建时间" dataIndex="createTime" />
            <Table.Column
              title="操作"
              render={(_text, record: IWarehouse) => (
                <Space>
                  <a
                    onClick={() => {
                      setEditMode(true);
                      openEditDrawer(record);
                    }}>
                    编辑
                  </a>
                  <a
                    onClick={() => {
                      dispatch(deleteWarehouse(record));
                    }}>
                    删除
                  </a>
                </Space>
              )}
            />
          </Table>
        </Card>
      </Flex>
      <Drawer
        size="large"
        open={openEditWarehouseDrawer}
        title={editMode ? "编辑仓库" : "新建仓库"}
        afterOpenChange={(open) => {
          if (!open) {
            setCrtWarehouse({
              id: -1,
              wName: "",
              address: "",
              note: "",
              createTime: "",
            });
          }
        }}
        extra={<EditWarehouse />}
        onClose={() => closeEditDrawer()}>
        <Form>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="仓库名">
                <Input
                  value={crtWarehouse.wName}
                  onChange={(e) =>
                    setCrtWarehouse({ ...crtWarehouse, wName: e.target.value })
                  }
                />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item label="地址">
                <Input.TextArea
                  value={crtWarehouse.address}
                  autoSize={true}
                  style={{ resize: "none" }}
                  count={{ max: 120 }}
                  showCount={true}
                  onChange={(e) =>
                    setCrtWarehouse({
                      ...crtWarehouse,
                      address: e.target.value,
                    })
                  }
                />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item label="备注">
                <Input.TextArea
                  value={crtWarehouse.note}
                  autoSize={true}
                  count={{ max: 300 }}
                  showCount={true}
                  style={{ resize: "none" }}
                  onChange={(e) =>
                    setCrtWarehouse({ ...crtWarehouse, note: e.target.value })
                  }
                />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
      {contextHolder}
    </>
  );
}
